<template>
	<view class="filterbar">
		<view class="flex nav">
			<!-- <span class="flex align-center justify-center" @tap="filterOrder()"><text class="ml10">默认</text></span> -->
			<span class="flex align-center justify-center" :class="{ active: sort.text }" @tap="openModal('modal')">
				<text>{{ sort.text || '综合排序' }}</text>
				<u-icon name="arrow-down" size="28"></u-icon>
				<!-- <image src="/static/up.png" mode="widthFix"></image> -->
			</span>
			<span class="filter flex align-center justify-center" :class="{ active: level && level.id }" @tap="openModal('modal-level')">
				<image src="/static/level.png" mode="widthFix"></image>
				<text class="ml10">{{ level && level.id ? level.name : '等级' }}</text>
			</span>
			<span class="flex align-center justify-center" :class="{ active: confirmfilterObj.is_zhijian_tuijian }" @tap="changeFilter('', 'is_zhijian_tuijian', 'search')">
				<text>质检推荐</text>
			</span>
			<span class="flex align-center justify-center" :class="{ active: confirmfilterObj.is_good }" @tap="changeFilter('', 'is_good', 'search')">
				<text>好卖家</text>
				<image class="icon-shop" :src="`/static/filter/shop${confirmfilterObj.is_good ? '_cur' : ''}.png`" mode="widthFix"></image>
			</span>
			<span class="flex align-center justify-center" :class="{ active: confirmfilterObj.is_shootvideo }" @tap="changeFilter('', 'is_shootvideo', 'search')">
				<text>实拍</text>
				<image class="icon-shop" :src="`/static/filter/video${confirmfilterObj.is_shootvideo ? '_cur' : ''}.png`" mode="widthFix"></image>
			</span>
			<span class="flex align-center justify-center" :class="{ active: hasFilter }" @tap="openModal('modal-filter')">
				<text>筛选</text>
				<image class="icon-filter" :src="`/static/filter/filter${hasFilter ? '_cur' : ''}.png`" mode="widthFix"></image>
			</span>
		</view>
		<!-- 筛选 条件 -->
		<zx-modal ref="modal">
			<view class="sortlist">
				<view class="sort-item" v-for="(item, index) in sortlist" :class="{ active: sort.value == item.value }" :key="index" @tap="changeSort(item)">
					{{ item.text }}
				</view>
			</view>
		</zx-modal>
		<zx-modal ref="modal-level">
			<view class="tags flex flex-wrap">
				<view class="tag" @tap="changeLevel(item)" :class="{ 'bg-orange': item.id == level.id }" v-for="(item, index) in levelList" :key="index">{{ item.name }}</view>
			</view>
		</zx-modal>
		<zx-modal ref="modal-filter">
			<view class="filterlist flex flex-direction" @tap.stop="">
				<scroll-view scroll-y class="flex-sub">
					<view class="title">商品状态</view>
					<view class="tags flex flex-wrap">
						<view class="tag" @tap="changeFilter('', 'stock')" :class="{ 'bg-orange': filterObj.stock }">仅看有货</view>
						<!-- <view class="tag" @tap="changeFilter('', 'is_seckill')" :class="{ 'bg-orange': filterObj.is_seckill }">秒杀产品</view> -->
						<view class="tag" v-if="isLogin" @tap="changeFilter('', 'product_is_follow')" :class="{ 'bg-orange': filterObj.product_is_follow }">已关注</view>
					</view>
					<view class="title">价格区间</view>
					<view class="pricebar flex align-center">
						<input type="digit" placeholder="最低价" @change="changePrice" v-model="filterObj.min_price" />
						<text>——</text>
						<input type="digit" placeholder="最高价" @change="changePrice" v-model="filterObj.max_price" />
					</view>
					<template v-if="filterlist.products_guige && filterlist.products_guige.length > 0">
						<view class="title">规格</view>
						<view class="tags flex flex-wrap">
							<view
								class="tag"
								@tap="changeFilter(item.id, 'product_guige')"
								:class="{ 'bg-orange': filterObj.product_guige && filterObj.product_guige.includes(item.id) }"
								v-for="(item, index) in filterlist.products_guige"
							>
								{{ item.name }}
							</view>
						</view>
					</template>
					<template v-if="filterlist.products_chengshudu && filterlist.products_chengshudu.length > 0">
						<view class="title">成熟度</view>
						<view class="tags flex flex-wrap">
							<view
								class="tag"
								@tap="changeFilter(item.id, 'product_chengshudu')"
								:class="{ 'bg-orange': filterObj.product_chengshudu && filterObj.product_chengshudu.includes(item.id) }"
								v-for="(item, index) in filterlist.products_chengshudu"
							>
								{{ item.name }}
							</view>
						</view>
					</template>
					<template v-if="filterlist.products_changdu && filterlist.products_changdu.length > 0">
						<view class="title">枝长</view>
						<view class="tags flex flex-wrap">
							<view
								class="tag"
								@tap="changeFilter(item.id, 'product_changdu')"
								:class="{ 'bg-orange': filterObj.product_changdu && filterObj.product_changdu.includes(item.id) }"
								v-for="(item, index) in filterlist.products_changdu"
							>
								{{ item.name }}
							</view>
						</view>
					</template>
					<template v-if="filterlist.product_youdian && filterlist.product_youdian.length > 0">
						<view class="title">优点</view>
						<view class="tags flex flex-wrap">
							<view
								class="tag"
								@tap="changeFilter(item.id, 'product_youdian')"
								:class="{ 'bg-orange': filterObj.product_youdian && filterObj.product_youdian.includes(item.id) }"
								v-for="(item, index) in filterlist.products_youdian"
							>
								{{ item.name }}
							</view>
						</view>
					</template>
					<template v-if="filterlist.product_quedian && filterlist.product_quedian.length > 0">
						<view class="title">缺点</view>
						<view class="tags flex flex-wrap">
							<view
								class="tag"
								@tap="changeFilter(item.id, 'product_quedian')"
								:class="{ 'bg-orange': filterObj.product_quedian && filterObj.product_quedian.includes(item.id) }"
								v-for="(item, index) in filterlist.products_quedian"
							>
								{{ item.name }}
							</view>
						</view>
					</template>
				</scroll-view>
				<view class="filterftbar flex justify-center">
					<span @tap="clearFilter">重置</span>
					<span @tap="confrimFilter">确定</span>
				</view>
			</view>
		</zx-modal>
	</view>
</template>

<script>
import filterIcon from '@/components/filter-icon.vue';
import zxModal from '@/components/zx-modal/zx-modal';
import { mapState } from 'vuex';
export default {
	name: 'filterbar',
	data() {
		return {
			navHeight: 50,
			sortlist: [
				// {
				// 	value: '',
				// 	text: '口碑优先'
				// },
				{
					value: 'price',
					text: '价格优先'
				},
				{
					value: 'total_sales',
					text: '销量优先'
				},
				// {
				// 	value: '',
				// 	text: '等级优先'
				// },
				{
					value: 'created_at',
					text: '发布时间'
				}
			],

			sort: {},
			level: { id: '' },
			levelList: [],
			modalName: 'modal',
			filterObj: {}, //筛选框选中的筛选条件
			confirmfilterObj: {
				is_good: false
			},
			filterlist: {}
		};
	},
	props: {
		searchkeyword: {
			type: String,
			default: ''
		},
		pid: {
			type: [String, Number],
			default: ''
		}
	},
	components: { filterIcon, zxModal },
	computed: {
		...mapState(['CustomBar', 'isLogin']),
		hasFilter() {
			console.log('this.confirmfilterObj', this.confirmfilterObj);
			for (var key in this.confirmfilterObj) {
				if (this.confirmfilterObj[key] && (this.confirmfilterObj[key] == 1 || this.confirmfilterObj[key].length > 0)) {
					return true;
				}
			}
			return false;
		}
	},
	mounted() {
		this.setDom();
		this.getProductScreen();
	},
	created() {
		// this.getLevel();
	},
	methods: {
		setDom: function () {
			var t = this;
			this.domData('.nav', function (e) {
				console.log('e', e);
				t.$refs.modal.navTop = e[0].bottom;
				t.$refs['modal-level'].navTop = e[0].bottom;
				t.$refs['modal-filter'].navTop = e[0].bottom;
				t.navHeight = e[0].height;
			});
		},
		openModal: function (t) {
			this.modalName !== t ? (this.$refs[t].isShow = !0) : (this.$refs[t].isShow = !this.$refs[t].isShow), (this.modalName = t);
			if (t == 'modal') {
				this.$refs['modal-level'].isShow = false;
				this.$refs['modal-filter'].isShow = false;
			} else if (t == 'modal-level') {
				this.$refs['modal'].isShow = false;
				this.$refs['modal-filter'].isShow = false;
			} else {
				this.$refs['modal-level'].isShow = false;
				this.$refs['modal'].isShow = false;
			}
		},
		changeSort(sort) {
			if (JSON.stringify(this.sort) == JSON.stringify(sort)) {
				this.sort = {};
			} else {
				this.sort = sort;
			}
			this.confrimFilter();
		},
		getLevel() {
			this.$postAction(this.$api.dengji).then(da => {
				this.levelList = da.data;
			});
		},
		changeLevel(item) {
			if (this.level && this.level.id == item.id) {
				this.level = null;
			} else {
				this.level = item;
			}
			this.confrimFilter();
			// this.sort = {};
			// this.$emit(
			// 	'changeFilrer',
			// 	this.level && this.level.id
			// 		? {
			// 				product_dengji: this.level.id
			// 		  }
			// 		: null
			// );
		},
		filterOrder() {
			this.level = {};
			this.sort = {};
			this.$emit('changeFilrer', {});
		},
		getProductScreen() {
			let param = {};
			if (this.pid) {
				param = {
					data: 'product_id,' + this.pid
				};
			} else {
				param = {
					data: 'name,' + this.searchkeyword
				};
			}
			this.$postAction(this.$api.productScreen, param).then(da => {
				if (da.code == 0) {
					this.filterlist = da.data;
					this.levelList = [
						{
							name: '全部',
							id: ''
						},
						...da.data.products_dengji
					];
				}
			});
		},
		changeFilter(id, type, isSearch) {
			if (['product_is_follow', 'stock', 'is_good', 'is_zhijian_tuijian','is_shootvideo'].includes(type)) {
				this.$set(this.filterObj, type, this.filterObj[type] == 1 ? 0 : 1);
				if (isSearch == 'search') {
					this.confrimFilter();
				}
			} else {
				if (!this.filterObj[type] || this.filterObj[type].length == 0) {
					// this.filterObj[type] = [id];
					this.$set(this.filterObj, type, [id]);
				} else {
					let index = this.filterObj[type].findIndex(item => item == id);
					if (index > -1) {
						this.filterObj[type].splice(index, 1);
					} else {
						this.filterObj[type].push(id);
					}
				}
			}

			console.log('this.filterObj', this.filterObj);
		},
		/* 清空筛选条件 */
		clearFilter() {
			this.filterObj = {};
			this.confirmfilterObj = {};
		},
		/* 确认筛选条件 */
		confrimFilter() {
			this.confirmfilterObj = {
				...this.filterObj
			};
			this.$refs['modal-filter'].isShow = false;
			// this.downCallback();
			let { min_price, max_price, ...extendParam } = this.confirmfilterObj;
			let search_more = [],
				param = {};
			for (var key in extendParam) {
				let val = Array.isArray(extendParam[key]) ? extendParam[key].join(',') : extendParam[key];
				if (val) {
					search_more.push({
						[key]: val
					});
				}
			}
			if (min_price || max_price) {
				search_more.push({
					price: min_price + ',' + max_price
				});
			}
			console.log('this.dengji', this.dengji);
			if (this.level.id) {
				search_more.push({
					product_dengji: this.level.id
				});
			}
			if (this.sort && this.sort.value) {
				if (this.sort.value == 'price') {
					param.price_by = 'asc';
				} else {
					param[this.sort.value] = 'desc';
				}
			}
			this.$emit('changeFilrer', {
				...param,
				search_more: JSON.stringify(search_more)
			});
		}
	}
};
</script>

<style scoped lang="scss">
.filterbar {
	position: relative;
	border-radius: 28upx 28upx 0px 0px;
	z-index: 800000;
	top: 0;
	left: 0;
	right: 0;
	padding: 20upx 12upx;
	z-index: 999;
	background: #fff;
	span {
		min-width: 100upx;
		height: 56upx;
		background: #f8f8f8;
		border-radius: 8upx;
		border: 1px solid #e0e0e0;
		padding: 0 10upx;
		color: #1c1c1e;
		font-size: 22upx;
		white-space: nowrap;
		& + span {
			margin-left: 10upx;
		}
		&.active {
			color: #fe5608;
		}
	}
	image {
		width: 24upx;
		height: 24upx;
		margin-left: 6upx;
		display: inline-block;
		vertical-align: middle;
	}

	.filter {
		image {
			width: 24upx;
			margin-left: 0;
		}
	}
}
.sortlist {
	.sort-item {
		line-height: 81upx;
		padding: 0 28upx;
		color: #1c1c1e;
		font-size: 28upx;
		&.active {
			background: #fff5f6;
			color: #ff3c47;
		}
	}
}
.tags {
	padding: 18upx;
	.tag {
		height: 56upx;
		font-size: 28upx;
		font-weight: 500;
		color: #666;
		background: none;
		line-height: 56upx;
		border-radius: 4upx;
		margin: 10upx;
		padding: 0 35upx;
		border: 1px solid #ccc;
		&.bg-orange {
			color: #ff3c47;
			border-color: #ff3c47;
		}
	}
}
/* 筛选 */
.filterlist {
	height: 50vh;
	padding: 0 30upx;
	overflow: hidden;

	& > .flex-sub {
		min-height: 0;
	}

	.title {
		font-size: 30upx;
		color: #000;
		margin: 20upx 0;
	}

	.tags {
		padding: 0;
		margin-left: -10upx;
		margin-right: -10upx;
	}

	.tag {
		padding: 0 28upx;
		height: 60upx;
		margin: 20upx 10upx;
	}

	.filterftbar {
		padding: 50upx 0;

		span {
			font-size: 28upx;
			width: 250upx;
			height: 70upx;
			line-height: 70upx;
			color: #f75451;
			border: 1px solid #f75451;
			border-radius: 50upx;
			text-align: center;
			background: #fff;
			& + span {
				margin-left: 120upx;
				color: #fff;
				background: linear-gradient(90deg, #ff8173 0%, #ff3543 100%);
				border: nonw;
			}
		}
	}

	.pricebar {
		input {
			border: 1px solid #eee;
			height: 60upx;
			border-radius: 10upx;
			line-height: 56upx;
			padding: 0 20upx;
			flex: 1;
			font-size: 28upx;
		}

		text {
			margin: 0 20upx;
			color: #ccc;
		}
	}
}
</style>
